<%--
  角色管理
  Created by IntelliJ IDEA.
  User: admin
  Date: 2016/7/6
  Time: 21:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!--公共声明的引用 begin-->
<%@include file="/page/base/declare.jsp"%>
<!--公共声明的引用 end-->
<!DOCTYPE html>
<html lang="en">
<head>
    <%@include file="../base/head.jsp"%>
    <!--public css import begin-->
    <link href="/static/css/base/common.base.css" rel="stylesheet">
    <!--public css import end-->
    <!--public js import begin-->
    <script src="/static/js/base/common.base.js"></script>
    <!--public js import end-->
    <link rel="stylesheet" href="/static/img/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
    <style>
        select{
            width: 178px;
        }
    </style>
</head>
<body>
<!--导航栏引入 begin-->
<%@include file="../base/navigation.jsp"%>
<!--导航栏引入 end-->

<div class="ch-container">
    <div class="row">

        <!--left menu begin-->
        <%@include file="../base/left.jsp"%>
        <!--left menu end-->

        <div id="content" class="col-lg-10 col-sm-10">
            <!-- content starts -->
         <%@include file="../base/breadcrumb.jsp"%>

            <div class="box col-md-12">
                <div class="row">
                    <div class="box col-md-12">
                        <div class="box-inner">
                            <div class="box-header well" data-original-title="">
                                <h2><i class="glyphicon glyphicon-user"></i> Responsive, Swipable Table</h2>

                                <div class="box-icon">
                                    <a href="#" class="btn btn-minimize btn-round btn-default"><i
                                            class="glyphicon glyphicon-chevron-up"></i></a>
                                    <a href="#" class="btn btn-close btn-round btn-default"><i
                                            class="glyphicon glyphicon-remove"></i></a>
                                </div>
                            </div>
                            <div class="box-content">
                                <%--<button id="addSource" class="btn btn-add">添加</button>--%>
                                <a id="addSource" class="btn btn-info" href="#"  data-toggle="modal" data-target="#addRoll">
                                    <i class="glyphicon glyphicon-plus icon-white"></i>
                                    添加角色
                                </a>
                            </div>
                            <div class="box-content">
                                <table class="table table-striped table-bordered responsive">
                                    <thead>
                                    <tr>
                                        <th>角色号</th>
                                        <th>角色名称</th>
                                        <th>创建人</th>
                                        <th>创建时间</th>
                                        <th>描述</th>
                                        <th>功能</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach items="${roles}" var="item">
                                        <tr>
                                            <td class="center">${item.id}</td>
                                            <td class="center">${item.name}</td>
                                            <td class="center">${item.adminName}</td>
                                            <td class="center"><fmt:formatDate value="${item.createTime}" pattern="yyyy/MM/dd HH:mm:ss"></fmt:formatDate></td>
                                            <td class="center">${item.desc}</td>
                                            <td class="center">
                                                <a class="btn btn-success" href="#">
                                                    <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                                                    View
                                                </a>
                                                <a class="btn btn-info" href="#"  data-toggle="modal" data-target="#editResource" onclick="showEditResource(${item.id})">
                                                    <i class="glyphicon glyphicon-edit icon-white"></i>
                                                    资源配置
                                                </a>
                                                <a class="btn btn-danger" href="#" onclick="deleteResource(${item.id})">
                                                    <i class="glyphicon glyphicon-trash icon-white"></i>
                                                    删除
                                                </a>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                    </tbody>
                                </table>
                                <%--<one:pageTag page="${page}" href="/auth/role_manager.htm"></one:pageTag>--%>
                                <div class="center">
                                    <ul class="pagination pagination-centered">
                                        <li><a href="#">Prev</a></li>
                                        <li class="active">
                                            <a href="#">1</a>
                                        </li>
                                        <li><a href="#">2</a></li>
                                        <li><a href="#">3</a></li>
                                        <li><a href="#">4</a></li>
                                        <li><a href="#">Next</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/span-->

                </div>
            </div>
            <!-- content ends -->
        </div>
    </div><!--/fluid-row-->

    <!--页脚引用 begin-->
    <%@include file="../base/footer.jsp"%>
    <!--页脚引用 end-->

</div>
<!--添加角色模态框-->
<div class="modal fade" id="addRoll" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">

    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>添加角色 <button type="button" class="close" onclick="closeModal(this)" aria-hidden="true">×</button></h3>
            </div>
            <br>
            <form id="addRoleForm" action="">
                <div class="form-group center">
                    <label class="control-label">角色名称：</label>
                    <input type="text" class="form-field" name="name">
                </div>
                <div class="form-group center">
                    <label class="control-label">角色描述：</label>
                    <input type="text" class="form-field" name="desc">
                </div>
            </form>
            <div class="modal-footer center">
                <a href="#" class="btn btn-default" data-dismiss="modal">关闭</a>
                <a href="#" class="btn btn-primary" onclick="addRole()">保存</a>
            </div>
        </div>
    </div>
</div>


<!--资源配置模态框-->
<div class="modal fade" id="editResource" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">

    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>配置资源 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></h3>
            </div>
            <form id="editResourceForm" action="">
                <input type="number" style="display: none" id="roleId">
                <input type="text" style="display: none" id="resourceIds">
                <div class="zTreeDemoBackground">
                    <ul id="treeDemo" class="ztree"  style="margin-left: 50px">

                    </ul>
                </div>
            </form>
            <div class="modal-footer">
                <a href="#" class="btn btn-default" data-dismiss="modal">关闭</a>
                <a href="#" class="btn btn-primary" onclick="submitEditResource()">保存</a>
            </div>
            <!--遮罩层，防止多次点击-->
            <div class="mask_control hide">
                <img src="/static/img/ajax-loaders/loading.gif">
            </div>
        </div>
    </div>
</div>


</body>
<script type="text/javascript" src="/static/js/ztree/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/static/js/ztree/jquery.ztree.excheck.js"></script>
<script>
    //显示添加的模态框
    $("#addSource").bind("click", function () {
        $("#addModal").addClass("in");
        $("#addModal").show();
    });

    //关闭模态框
    function closeModal(obj) {
        var modal = $(obj).parents(".modal");
        modal.modal("hide");
    }

    //提交添加资源的表单
    function addRole() {
        $.ajax({
            url:'auth/role_add.json',
            type:'post',
            data: $("#addRoleForm").serialize(),
            dataType:"json",
            async : false, //默认为true 异步
            error:function(){
                alert('error');
            },
            success:function(data){
                alert("添加成功！");
                window.location.reload();
            }
        });
    }

    //删除
    function deleteResource(resourceId) {
        if(window.confirm("是否确定删除？")) {
            $.ajax({
                url:'resource/delete_resource.json?resourceId=' + resourceId,
                type:'get',
                dataType:"json",
                async : false, //默认为true 异步
                error:function(){
                    alert('error');
                },
                success:function(data){
                    alert("删除成功！");
                    window.location.reload();
                }
            });
        }
    }

    //切换资源等级
    $("#level").bind("change", function() {
        console.log($("#level").val());
        if($("#level").val() == 2) {
            $("#url").show();
        }else {
            $("#url").hide();
        }
    });

    var zNodes;
    //显示角色的资源编辑模态框
    function showEditResource(id) {
        $("#roleId").val(id);
        var setting = {
                check: {
                  enable: true
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                }
            };

        zNodes =[
        { id:1, pId:0, name:"随意勾选 1", open:true},
        { id:11, pId:1, name:"随意勾选 1-1", open:true},
        { id:111, pId:11, name:"随意勾选 1-1-1"},
        { id:112, pId:11, name:"随意勾选 1-1-2"},
        { id:12, pId:1, name:"随意勾选 1-2", open:true},
        { id:121, pId:12, name:"随意勾选 1-2-1"},
        { id:122, pId:12, name:"随意勾选 1-2-2"},
        { id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
        { id:21, pId:2, name:"随意勾选 2-1"},
        { id:22, pId:2, name:"随意勾选 2-2", open:true},
        { id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
        { id:222, pId:22, name:"随意勾选 2-2-2"},
        { id:23, pId:2, name:"随意勾选 2-3"},
        { id:234, pId:1, name:"哈哈", open:true},
        ];

//        zNodes = [];



        //获得资源
        $.ajax({
            url:"/auth/get_z_tree_resource.json?roleId=" + id,
            content:"json",
            success:function(data) {
                console.log("查询结果:" + data)
                var pageResources = data.pageResources;
                var buttonResources = data.buttonResources;
                var jsonResources = data.jsonResources;
                zNodes = [];
                //初始化菜单主目录
                if(pageResources != null && pageResources.length > 0 ) {
                    zNodes.push({id:-1, pId:0, name:"页面", checked:false});
                }
                if(buttonResources != null && buttonResources.length > 0 ) {
                    zNodes.push({id:-2, pId:0, name:"按钮", checked:false});
                }
                if(jsonResources != null && jsonResources.length > 0 ) {
                    zNodes.push({id:-3, pId:0, name:"通用接口", checked:false});
                }

                //遍历页面
                for(var index = 0; index < pageResources.length; index ++) {
                    var id = pageResources[index].id;
                    var type = pageResources[index].type;
                    var pid = pageResources[index].parentId == null ? 0 : pageResources[index].parentId;
                    var name = pageResources[index].name;
                    var checked = pageResources[index].checked;
                    if(pid == 0) {
                        pid = -1;
                    }
                    var jsonStr = {id:id, pId:pid, name:name, checked:checked};
                    zNodes.push(jsonStr);
                }
                //遍历按钮
                for(var index = 0; index < buttonResources.length; index ++) {
                    var id = buttonResources[index].id;
                    var type = buttonResources[index].type;
                    var pid = buttonResources[index].parentId == null ? 0 : buttonResources[index].parentId;
                    var name = buttonResources[index].name;
                    var checked = buttonResources[index].checked;

                   if(type == 1) {
                       id = - id - 10;
                       pid = -2;
                   }else {
                       pid = - pid - 10;
                   }
                    var jsonStr = {id:id, pId:pid, name:name, checked:checked};
                    zNodes.push(jsonStr);
                }
                //遍历通用接口
                for(var index = 0; index < jsonResources.length; index ++) {
                    var id = jsonResources[index].id;
                    var type = jsonResources[index].type;
                    var pid = jsonResources[index].parentId == null ? 0 : jsonResources[index].parentId;
                    var name = jsonResources[index].name;
                    var checked = jsonResources[index].checked;
                    pid = -3;
                    var jsonStr = {id:id, pId:pid, name:name, checked:checked};
                    zNodes.push(jsonStr);
                }
                console.log(zNodes);
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                setCheck();
                $("#editResource").show();
            }
        });
    }

    var code;
    function setCheck() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
        type = { "Y":"ps", "N":"ps"};
        zTree.setting.check.chkboxType = type;
        showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
        }
        function showCode(str) {
        if (!code) code = $("#code");
        code.empty();
        code.append("<li>"+str+"</li>");
    }

    //提交角色资源权限
    function submitEditResource() {
        var resourceIds;
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes =  zTree.getCheckedNodes(true);
        for(var i = 0; i < nodes.length; i ++) {
            if(i == 0) {
                resourceIds = nodes[i].id;
            }else {
                resourceIds = resourceIds + "," + nodes[i].id;
            }
        }
        var roleId = $("#roleId").val();
        $.ajax({
            url:"/auth/modify_resource_of_role.json?roleId=" + roleId + "&resourceIds=" + resourceIds,
            content:"json",
            success:function(data) {
                alert("成功！");
                window.location.reload();
            }
        });
    }
</script>
<%--<script type="text/javascript">--%>
    <%--<!----%>
    <%--var setting = {--%>
        <%--check: {--%>
            <%--enable: true--%>
        <%--},--%>
        <%--data: {--%>
            <%--simpleData: {--%>
                <%--enable: true--%>
            <%--}--%>
        <%--}--%>
    <%--};--%>

    <%--//目录数据--%>
    <%--var zNodes =[--%>
        <%--{ id:1, pId:0, name:"随意勾选 1", open:true},--%>
        <%--{ id:11, pId:1, name:"随意勾选 1-1", open:true},--%>
        <%--{ id:111, pId:11, name:"随意勾选 1-1-1"},--%>
        <%--{ id:112, pId:11, name:"随意勾选 1-1-2"},--%>
        <%--{ id:12, pId:1, name:"随意勾选 1-2", open:true},--%>
        <%--{ id:121, pId:12, name:"随意勾选 1-2-1"},--%>
        <%--{ id:122, pId:12, name:"随意勾选 1-2-2"},--%>
        <%--{ id:2, pId:0, name:"随意勾选 2", checked:true, open:true},--%>
        <%--{ id:21, pId:2, name:"随意勾选 2-1"},--%>
        <%--{ id:22, pId:2, name:"随意勾选 2-2", open:true},--%>
        <%--{ id:221, pId:22, name:"随意勾选 2-2-1", checked:true},--%>
        <%--{ id:222, pId:22, name:"随意勾选 2-2-2"},--%>
        <%--{ id:23, pId:2, name:"随意勾选 2-3"},--%>
        <%--{ id:234, pId:1, name:"哈哈", open:true},--%>
    <%--];--%>

    <%--var code;--%>

    <%--function setCheck() {--%>
        <%--var zTree = $.fn.zTree.getZTreeObj("treeDemo"),--%>
                <%--type = { "Y":"ps", "N":"ps"};--%>
        <%--zTree.setting.check.chkboxType = type;--%>
        <%--showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');--%>
    <%--}--%>
    <%--function showCode(str) {--%>
        <%--if (!code) code = $("#code");--%>
        <%--code.empty();--%>
        <%--code.append("<li>"+str+"</li>");--%>
    <%--}--%>

    <%--$(document).ready(function(){--%>
        <%--$.fn.zTree.init($("#treeDemo"), setting, zNodes);--%>
        <%--setCheck();--%>
<%--//        $("#py").bind("change", setCheck);--%>
<%--//        $("#sy").bind("change", setCheck);--%>
<%--//        $("#pn").bind("change", setCheck);--%>
<%--//        $("#sn").bind("change", setCheck);--%>
    <%--});--%>
    <%--//-->--%>
<%--</script>--%>
</html>
